import React, { useState } from "react";
import "./App.css";
import { Layout, Menu, Affix } from "antd";

import { Link, Routes, Route } from "react-router-dom";
import routes from "./routes";
import Home from "./pages/Home";
import Login from "./pages/Login";
const { Sider, Header, Content } = Layout;

function App() {
  const currentPath = window.location.pathname;
  const [flag, setflag] = useState(false);
  // const [token] = useState(JSON.parse(sessionStorage.getItem('token') || ''))
  const [selectedPath, setSelectedPath] = useState(
    routes.find((item) => currentPath.includes(item.key))?.key || ""
  );

  // 重写函数
  const _wr = function (type: string) {
    const orig = (window as any).history[type];
    return function () {
      const rv = orig.apply(this, arguments);
      const e: any = new Event(type);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return rv;
    };
  };

  window.history.pushState = _wr("pushState");

  // 在这个函数中做跳转后的逻辑
  const bindHistory = () => {
    const currentPath = window.location.pathname;
    setSelectedPath(
      routes.find((item) => currentPath.includes(item.key))?.key || ""
    );
  };

  // 绑定事件
  window.addEventListener("pushState", bindHistory);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      {flag ? (
        <Routes>
          <Route path="/login" element={<Login />} />
        </Routes>
      ) : (

        <Layout>
          <Affix>
            <Sider collapsedWidth="0">
              <div className="page-logo">
                <h3>河北大学第一附属医院</h3>
              </div>
              <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={["main-app"]}
                selectedKeys={[selectedPath || "main-app"]}
                onClick={({ key }) => setSelectedPath(key)}
              >
                {routes
                  .filter((item) => item.showMenu)
                  .map((route) => {
                    if (route.children && route.children.length > 0) {
                      return (
                        <Menu.SubMenu
                          key={route.key}
                          title={route.title}
                          icon={route.icon ? React.createElement(route.icon) : null}
                        >
                          {route.children
                            .filter((child) => child.showMenu)
                            .map((subRoute: any) => (
                              <Menu.Item
                                key={subRoute.key}
                                icon={subRoute.icon ? React.createElement(subRoute.icon) : null}
                              >
                                <Link to={subRoute.path}>{subRoute.title}</Link>
                              </Menu.Item>
                            ))}
                        </Menu.SubMenu>
                      );
                    }
                    return (
                      <Menu.Item
                        key={route.key}
                        icon={React.createElement(route.icon)}
                      >
                        <Link to={route.path}>{route.title}</Link>
                      </Menu.Item>
                    );
                  })}
              </Menu>
            </Sider>
          </Affix>

          <Layout>
            <Affix>
              <Header style={{ padding: 0 }} />
            </Affix>


            <Content
              style={{
                margin: "24px 16px 0",
                height: "100%",
                background: "#F2F2F2",
                // padding: "10px",
                // border: '1px solid red'
              }}
            >
              {/* 主应用渲染区域 */}
              <Routes>
                <Route path="/" element={<Home />} />
              </Routes>

              {/* 子应用渲染区域 */}
              <div id="sub-app"></div>
            </Content>
          </Layout>
        </Layout>
      )}
    </div>
  );
}

export default App;
